<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>俄罗斯方块</title>
		<style>
			body{
				background-color:pink;
			}
			.box{
				width: 560px;
				margin: 40px auto;
				position: relative;
			}	
			a{
				display: block;
			}
			a:hover {
				box-shadow: 0px 2px 2px 2px #F57C90;
			}
			.box img{
				height:100px;
				width: 100px;
				opacity: 0.9;
				border-radius:10px;
			}		
			.box .box1{
				height:100px;
				width: 100px;
				border-radius: 10px;
				background-position-x:;
			}
			.darkgreen{
				background-color: #65CD00;
			}
			.green{
				background-color: #84D433;
			}
			.purple{
				background-color:#7F68EA ;
			}
			.orange{
				background-color:#FACF45 ;
			}
			.pink{
				background-color:#E7697E;
			}
			.blue{
					background-color:#1DBFFF;
			}
			.box .c15{
				border-bottom-left-radius: 80%;
			}
			.box .c13{
				border-bottom-right-radius: 80%;
			}
			.c13 img{
				border-bottom-right-radius: 80%;
			}
			.c15 img{
				border-bottom-left-radius: 80%;
			}
			.c1{
				position: absolute;
				top:10px;
				left:110px;
			}
			.c2{
				position: absolute;
				top:10px;
				left:220px;	
			}
			.c3{
				position: absolute;
				top:10px;
				left:330px;	
			}
			.c4{
				position: absolute;
				top:120px;
				left:220px;	
			}
			.c5{
				position: absolute;
				top:230px;
				left:220px;	
			}
			.c6{
				position: absolute;
				top:440px;
				left:110px;	
			}
			.c7{
				position: absolute;
				top:330px;
				left:440px;	
			}
			.c8{
				position: absolute;
				top:220px;
				left:0px;	
			}
			.c9{
				position: absolute;
				top:440px;
				left:330px;	
			}
			.c10{
				position: absolute;
				top:330px;
				left:110px;	
			}
			.c11{
				position: absolute;
				top:220px;
				left:440px;	
			}
			.c12{
				position: absolute;
				top:330px;
				left:0px;	
			}
			.c13{
				position: absolute;
				top:440px;
				left:440px;	
			}
			.c14{
				position: absolute;
				top:330px;
				left:330px;	
			}
			.c15{
				position: absolute;
				top:440px;
				left:0px;	
			}
			.higthlight{
				width: 94px;
				height: 20px;
				border-top-left-radius: 80%;
				border-top-right-radius: 80%;
				border-bottom-left-radius: 40%;
				border-bottom-right-radius: 40%;
				background: linear-gradient(to top,rgba(255,255,255,0.2),rgba(255,255,255,1));
				position:absolute;
				top:3px;
				left:112px;
				z-index:1;
				
			}
		</style>
	</head>
	<body>
		<div class="box">
			<a class=" box1 darkgreen c1" href="adver.html"><img src="image/pikaqiu1.jpg"/></a>
			<a class=" box1 darkgreen c2"><img src="image/pikaqiu1.jpg"/></a>
			<a class=" box1 darkgreen c3"><img src="image/pikaqiu1.jpg"/></a>
			<a class=" box1 darkgreen c4"><img src="image/pikaqiu1.jpg"/></a>
			<a class=" box1 darkgreen c5"><img src="image/pikaqiu1.jpg"/></a>
			<a class=" box1 green c6"><img src="image/pikaqiu2.jpg"/></a>
			<a class=" box1 green c7"><img src="image/pikaqiu2.jpg"/></a>
			<a class=" box1 purple c8"><img src="image/pikaqiu3.jpg"/></a>
			<a class=" box1 purple c9"><img src="image/pikaqiu3.jpg"/></a>
			<a class=" box1 orange c10"><img src="image/pikaqiu4.jpg"/></a>
			<a class=" box1 orange c11"><img src="image/pikaqiu4.jpg"/></a>
			<a class=" box1 pink c12"><img src="image/pikaqiu5.jpg"/></a>
			<a class=" box1 pink c13"><img src="image/pikaqiu5.jpg"/></a>
			<a class=" box1 blue c14"><img src="image/pikaqiu6.jpg"/></a>
			<a class=" box1 blue c15"><img src="image/pikaqiu6.jpg"/></a>
			<div class="higthlight"></div>
			
		</div>
		
	</body>
</html>
